<template>
  <div class="app-container">
    <!-- <Navbar /> -->
    <div class="main-content">
      <div class="lower-section">
        <!--使用路由-->
        <router-view />
        <AiPanel v-if="$route.path !== '/exam-manage'" />
      </div>
    </div>

    <QuestionModal
      v-if="showQuestionModal"
      :bank="currentBank"
      @close="closeQuestionModal"
    />
    <ConfirmModal
      v-if="showConfirmModal"
      :message="confirmMessage"
      @confirm="confirmAction"
      @cancel="cancelAction"
    />
  </div>
</template>

<script>
import Navbar from "@/components/Navbar.vue";
import DataPanel from "@/views/DataPanel.vue";
import AiPanel from "@/components/ai/AiPanel.vue";
import QuestionModal from "@/components/questionbank/QuestionModal.vue";
import ConfirmModal from "@/components/ConfirmModal.vue";
import PaperList from "@/views/PaperList.vue";
import { mapActions, mapGetters } from "vuex";

export default {
  components: {
    Navbar,
    DataPanel,
    AiPanel,
    QuestionModal,
    ConfirmModal,
    PaperList,
  },
  data() {
    return {
      showQuestionModal: false,
      showConfirmModal: false,
      currentBank: null,
      confirmMessage: "",
      confirmCallback: null,
    };
  },
  methods: {
    ...mapActions("user", ["fetchUserInfo"]),
    openQuestionModal(bank) {
      this.currentBank = bank;
      this.showQuestionModal = true;
    },
    closeQuestionModal() {
      this.showQuestionModal = false;
      this.currentBank = null;
    },
    showConfirm(message, callback) {
      this.confirmMessage = message;
      this.confirmCallback = callback;
      this.showConfirmModal = true;
    },
    confirmAction() {
      if (this.confirmCallback) {
        this.confirmCallback();
      }
      this.showConfirmModal = false;
    },
    cancelAction() {
      this.showConfirmModal = false;
    },
    async initUserInfo() {
      // 这里可以添加初始化用户信息的逻辑
      // 例如，调用 Vuex 的 action 来获取用户信息
      await this.fetchUserInfo();
    },
    handleMessage(message) {
      // console.log("你好你好:",message);

      switch (message.messageType) {
        case 10000:
          // 刷新页面
          let res = JSON.parse(message.content);
          this.$notify({
            title: "考试开始",
            message: `${res.msg}`,
            type: "success",
          });
          break;
        default:
      }
    },
  },
  provide() {
    return {
      openQuestionModal: this.openQuestionModal,
      showConfirm: this.showConfirm,
    };
  },
  created() {
    // 在组件创建时调用 initUserInfo 方法
    this.initUserInfo();
    this.$initWebSocket();
    // 注册注册一个websocket的回调函数
    this.$registerWebSocketHandler(this.handleMessage);
  },
  computed: {
    ...mapGetters("user", ["getUserInfo"]), // 映射 getter
  },
};
</script>

<style>
/* 全局样式 */
:root {
  --primary: #4361ee;
  --primary-light: #e0e7ff;
  --primary-light-2: #f0f4ff;
  --secondary: #3f37c9;
  --dark: #1e1b4b;
  --light: #f8fafc;
  --gray: #94a3b8;
  --gray-light: #e2e8f0;
  --gray-light-2: #f1f5f9;
  --gray-dark: #64748b;
  --success: #10b981;
  --warning: #f59e0b;
  --danger: #ef4444;
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Inter", sans-serif;
  background-color: var(--gray-light-2);
  color: var(--dark);
  line-height: 1.5;
}

.app-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
}

.main-content {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow: hidden;
}

.lower-section {
  display: flex;
  flex: 1;
  overflow: hidden;
  position: relative;
}

/* 滚动条样式 */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: var(--gray-light);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb {
  background: var(--gray);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--gray-dark);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .lower-section {
    flex-direction: column;
  }
}
</style>
